<template>
  <div id="map" ref="refMap" class="leaflet-map-class" v-contextmenu:contextmenu>
    <div class="operation">
      <!--click.stop阻止事件继续传递执行-->
      <el-button type="primary" icon="el-icon-share" size="small" @click.stop="plot"
        >绘制多边形</el-button
      >
      <el-button type="primary" icon="el-icon-share" size="small" @click.stop="drag"
        >拖动多边形</el-button
      >
      <el-button type="primary" icon="el-icon-share" size="small" @click.stop="edit"
        >编辑多边形</el-button
      >
    </div>
  </div>
  <v-contextmenu ref="contextmenu">
    <v-contextmenu-group title="">
      <v-contextmenu-item @click="savePolygon">
        <img :src="url" class="image-size" />
      </v-contextmenu-item>
      <v-contextmenu-item @click="deletePolygon">
        <img :src="url" class="image-size" />
      </v-contextmenu-item>
    </v-contextmenu-group>
  </v-contextmenu>
</template>
<script>
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
import {
  directive,
  Contextmenu,
  ContextmenuItem,
  ContextmenuDivider,
  ContextmenuSubmenu,
  ContextmenuGroup
} from 'v-contextmenu'
import { useMap } from './useMap'
import 'v-contextmenu/dist/themes/default.css'
import { warnMessage, successMessage } from '../../../../main-vite-app-ts/src/utils/message'

export default defineComponent({
  directives: {
    contextmenu: directive
  },
  components: {
    [Contextmenu.name]: Contextmenu,
    [ContextmenuItem.name]: ContextmenuItem,
    [ContextmenuDivider.name]: ContextmenuDivider,
    [ContextmenuSubmenu.name]: ContextmenuSubmenu,
    [ContextmenuGroup.name]: ContextmenuGroup
  },
  setup() {
    const contextmenu = ref(null)
    const refMap = ref(null)
    let map = {}
    const state = reactive({
      url: '../images/map-app/btn-save-normal.png',
      plotPolygon: [] // Polygon多边形
    })

    const plot = () => {
      console.log('open')
      if (state.plotPolygon.length > 0) {
        warnMessage('已标绘，请进行编辑')
      } else {
        map.pm.disableGlobalEditMode()
        map.pm.enableDraw('Polygon', {
          pinning: true,
          snappable: true, // 可吸附于附近的某一个点
          measurements: { measurement: true }
        })
      }
    }

    // 设置可编辑
    const edit = () => {
      if (state.plotPolygon.length === 0) {
        warnMessage('请先进行标绘')
        return false
      }
      map.pm.enableGlobalEditMode()
    }

    // 设置可拖拽
    const drag = () => {
      if (state.plotPolygon.length === 0) {
        warnMessage('请先进行标绘')
        return false
      }
      map.pm.disableGlobalEditMode()
      map.pm.enableGlobalDragMode()
    }

    function deletePolygon(e) {
      console.log('deletePolygon')
      if (state.plotPolygon.length === 0) {
        warnMessage('请先进行标绘')
      } else {
        removePolygon(map)
        successMessage('标绘移除成功')
        state.plotPolygon = []
      }
    }

    function savePolygon(e) {
      console.log('savePolygon')
      if (state.plotPolygon.length === 0) {
        warnMessage('请先进行标绘')
      }
    }

    const { init, removePolygon } = useMap()
    onMounted(() => {
      map = init([34.263742732916505, 108.01650524139406])

      // 图层创建成功结束时调用的方法（目前针对Marker和Polygon多边形）
      map.on('pm:create', (e) => {
        // Polygon 多边形
        if (e.shape === 'Polygon') {
          state.plotPolygon = e.layer._latlngs
          console.log('绘制多边形', e)
        }

        e.layer.on('click', function () {
          console.log('创建了图层后的click事件')
        })

        // 编辑修改后的坐标
        e.layer.on('pm:edit', (event) => {
          state.plotPolygon = event.layer._latlngs
          console.log(event, 'pm:edit拖动')
        })
      })
    })
    return {
      ...toRefs(state),
      plot,
      drag,
      edit,
      savePolygon,
      deletePolygon,
      refMap,
      contextmenu
    }
  }
})
</script>
<style lang="scss" scoped>
.leaflet-map-class {
  width: calc(100vw - 270px);
  height: calc(100vh - 90px);
}
.operation {
  position: absolute;
  z-index: 10000;
  top: 20px;
  right: 10px;
  padding: 2px;
  // width: 120px;
  height: 30px;
}
.image-size {
  width: 18px;
  height: 18px;
}
</style>
